<template>
  <div class="control ">
    <!--  标题区域  -->
    <div class="flex flex-a-c">
      <div class="control-title colorin">数控系统信息</div>
      <a-button v-if="show" type="primary" icon="check-circle" @click="handleEdit">完成</a-button>
      <a-button v-else type="primary" icon="edit" @click="handleEdit">编辑</a-button>
    </div>
    <br />
    <!--  内容区域  -->
    <a-form-model :model="model" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row :gutter="24">
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="系统型号">
            <span class="colorin" v-if="!show">{{ model.systemType || '' }}</span>
            <a-select
              v-else
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              show-search
              :allowClear="true"
              option-filter-prop="children"
              v-model="model.systemType"
              :filter-option="filterOption"
              placeholder="请选择系统型号"
            >
              <a-select-option v-for="item in systemTypes" :key="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="系统编号">
            <span class="colorin" v-if="!show">{{ model.cncNumber || '' }}</span>
            <a-input v-else v-model="model.cncNumber" placeholder="请输入系统编号" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="软件版本">
            <span class="colorin" v-if="!show">{{ model.softwareVersion || '' }}</span>
            <a-input v-else v-model="model.softwareVersion" placeholder="请输入软件版本" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="NCU">
            <span class="colorin" v-if="!show">{{ model.ncu || '' }}</span>
            <a-input v-else v-model="model.ncu" placeholder="请输入NCU" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="LAD">
            <span class="colorin" v-if="!show">{{ model.lad || '' }}</span>
            <a-input v-else v-model="model.lad" placeholder="请输入LAD" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="DRV">
            <span class="colorin" v-if="!show">{{ model.drv || '' }}</span>
            <a-input v-else v-model="model.drv" placeholder="请输入DRV" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="OS">
            <span class="colorin" v-if="!show">{{ model.os || '' }}</span>
            <a-input v-else v-model="model.os" placeholder="请输入OS" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :xxl="6">
          <a-form-model-item label="API">
            <span class="colorin" v-if="!show">{{ model.api || '' }}</span>
            <a-input v-else v-model="model.api" placeholder="请输入API" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import api from '@api/deviceInfo';
import { systemTypes } from './config';
export default {
  name: 'ControlSystem',
  data() {
    return {
      systemTypes,
      show: false,
      model: {},
      labelCol: {
        xl: { span: 6 },
        xxl: { span: 6 },
      },
      wrapperCol: {
        xl: { span: 18 },
        xxl: { span: 18 },
      },
    };
  },
  computed: {
    macSN() {
      return this.$route.query.macsn;
    },
  },
  mounted() {
    this.getArchivesCncDevice();
  },
  methods: {
    // 数控系统编辑
    handleEdit() {
      if (this.show) {
        this.updateArchivesCncDevice();
      } else {
        this.show = true;
      }
    },
    // 查询数控系统信息
    async getArchivesCncDevice() {
      const { Data: res } = await api.getArchivesCncDevice({ macSn: this.macSN });
      if (res !== '') {
        this.model = res;
      }
    },
    // 修改數控系統信息
    async updateArchivesCncDevice() {
      this.model.macSn = this.macSN;
      const res = await api.updateArchivesCncDevice(this.model);
      if (res.MsgCode === 0) {
        this.$message.info(res.MsgDesc);
        await this.getArchivesCncDevice();
        this.show = false;
      } else {
        this.$message.error(res.MsgDesc);
      }
    },
    //名称下拉选择输入过滤
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
  },
};
</script>

<style scoped lang="less">
.control {
  font-family: Microsoft YaHei;
  .control-title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-right: 20px;
  }
}
</style>
